<template>
	<view class="content" >
		   <form @submit="submit">
			<u-navbar :is-back="true" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt10">举报</view>
					<view class="slot-wrap-right pr">
						<button form-type="submit" style="height: 70rpx;background: none;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="qxl-icon" size="44"></u-icon>
							</view>
						</button>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main" >
				
				<view class="bgf f32 disfr-lr bto" style="padding: 10rpx 30rpx;">
					<view class="pt10">
						<image :src="profile" style="width: 70rpx;height: 70rpx;border-radius: 6px;"></image>
					</view>
					<view class="pr" style="top:30rpx">
						{{name}}
					</view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>违规类型</text></view>
					<picker  @change="bindPickerChange" :range="classList">
						<view class="disf">
							<view v-if="classList[classIndex]" class="pr" style="top:0rpx;">{{classList[classIndex] ? classList[classIndex] : ''}}</view>
							<view v-else class="pr col999" style="top:2rpx;">选择类型</view>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						 </view>
						 <input  type="text" :value="classList[classIndex] ? classList[classIndex] : ''" name="nature" class="hide"/>
					</picker>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>举报内容</text></view>
					<view class="disf" @click="showUpdate" :data-value="result.introduction" data-field="introduction">
						<input type="text" name="content" class="pr" style="text-align: right;top:5rpx"
						placeholder-style="color:#999999;font-size:32rpx;" placeholder="*输入举报内容"/>
					    <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					 </view>
				</view>
				
				<view class="bgf p30 f32 bto">
					<view class="pt10"><text>上传图片</text></view>
					<view class="form-list">
					  <uploads-image :list="imageList" bg-color="#f4f5f7" :number="4" @confirm-event="uploadImage" @delete-event="deleteImage"/>
					  <input type="text" :value="imageString" name="images" maxlength="-1" class="hide"/>
					</view>
				</view>
				
				<view style="height: 100rpx;"></view>
			</view>
			<input type="text" name="type" :value="type" class="hide"/>
			<input type="text" name="complaint_id" :value="complaint_id" class="hide"/>
		</form>
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const result=ref({});
const type=ref(0); //举报类型
const complaint_id=ref(0); //号被举报者ID
const profile=ref(''); // 被举报者头像
const name=ref(''); // 被举报者呢称
const imageList=ref([]);
const imageString=ref('');
//显示选择举报类
const classList=ref([]);
const classIndex=ref(-1);
const bindPickerChange=(e)=>{
	classIndex.value=e.detail.value;
};
//上传举报图片
const uploadImage=async(files)=>{
	not_load.value=false;
	for(let i=0;i< files.length;i++){
		let ret = await uni.$uploadFile('/appapi-upload-image',files[i],{});
		imageList.value.push(ret.data.url);
	}
	not_load.value=true;
	let imageStringTmp=imageList.value.join(',');
	imageString.value=imageStringTmp;
	//console.log(imageString);			 
};
// 删除图片
const deleteImage=(files)=>{		 
	imageList.value=files;
    let imageStringTmp=imageList.value.join(',');
    imageString.value=imageStringTmp;
};
//表单提交
const submit=async(e)=>{
	if(!not_load.value) return;
	let form=e.detail.value;
	if(!form.nature){
		uni.$utils.showToast('举报类型必填');
		return;
	}
	if(!form.content){
		uni.$utils.showToast('举报内容必填');
		return;
	}
	not_load.value=false;
	let ret=await uni.$post('/appapi-member-report',{},form);
	console.log(ret);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast('举报提交成功',0,()=>{
		uni.navigateBack({data:1});
	});
};
//页面加载时
onLoad(async (options)=>{
	type.value=options.type;
	complaint_id.value=options.id;
	profile.value=decodeURIComponent(options.profile);
	name.value=decodeURIComponent(options.name);
    loadPage(options,false);
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-config-getreporttype',{});
	if(ret.error_code != 0){
		show_main.value=true;
		not_load.value=true;
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	
	show_main.value=true;
	not_load.value=true;
	classList.value=ret.data;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	topDropDownShow.value=false;
	uni.$utils.dataSetPage(event);
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.my_button{
	color:#fff;
	font-weight: normal;
	font-size: 32rpx;
	border:none;
	background: blue;
	background: #2979ff;
}
</style>
